<script setup>
import { getCurrentInstance, ref } from 'vue'
import cart from "@/assets/shopping.png"
import wallet from '@/assets/wallet.png'
import qrcode from '@/assets/qrcode.png'
import workbench from '@/assets/workbench.png'
import bytedance from '@/assets/bytedance-mini-app.png'
import umbrella from '@/assets/umbrella.png'
import headset from '@/assets/headset.png'
import setting from '@/assets/setting.png'
import gongyi from '@/assets/gongyi.png'
import time from '@/assets/time.png'
import clock from '@/assets/clock.png'
import useStore from "@/store/index.js";
import { showSuccessToast } from "vant";

const { proxy } = getCurrentInstance()

const { userInfo } = useStore()

const emit = defineEmits(['overlyFlay', 'update:rightWidth']);
const props = defineProps({
	rightWidth: {
		type: Number,
		required: true
	}
});
const moreList = ref([
	{ id: 1, title: "我的订单", url: cart },
	{ id: 2, title: "钱包", url: wallet },
	{ id: 3, title: "我的二维码", url: qrcode },
	{ id: 4, title: "观看历史", url: time },
	{ id: 5, title: "时间管理", url: clock },
	{ id: 6, title: "创作者服务中心", url: workbench },
	{ id: 7, title: "小程序", url: bytedance },
	{ id: 8, title: "抖音公益", url: gongyi },
	{ id: 9, title: "未成年保护工具", url: umbrella },
	{ id: 10, title: "我的客服", url: headset },
	{ id: 11, title: "设置", url: setting },
])
const clickOver = () => {
	emit("overlyFlay")
}

const updateLogin = (flag) => {
	if (flag) {
		userInfo.logout()
		emit("update:rightWidth", -700)
		showSuccessToast("退出完成")
		return;
	}
	proxy.$router.push("/login")
}
</script>

<template>
	<transition name="fade1">
		<div class="w-[700px] p-[10px] bg-[#161616] more relative">
			<div v-for="item in moreList" :key="item.id" class="w-[100%] px-[10px] py-[20px] flex items-center ">
				<img :src="item.url" class="h-[20px] w-[20px] mr-[15px]" />
				<span>{{ item.title }}</span>
			</div>
			<div class="w-[100%] px-[10px] py-[10px] flex items-center " @click="updateLogin(Boolean(userInfo.userInfo.id))">
				<img :src="setting" class="h-[20px] w-[20px] mr-[15px]" />
				<span>{{ userInfo.userInfo.id ? "退出" : "登录" }}</span>
			</div>
			<!-- 遮罩层 -->
			<div class="absolute more over_w left-[-130px] top-[0px]" v-if="rightWidth == -400" @click="clickOver">
			</div>
		</div>
	</transition>
	<!-- <div class="button-ctn">
    <div class="button">
      <img src="../../assets/img/icon/newicon/left_menu/more.png" />
      <span>更多功能</span>
    </div>
  </div> -->
</template>

<style lang="scss" scoped>
.more {
	height: calc(100vh - 65px);
}

.over_w {
	width: 130px;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 100;
}
</style>
